<template>
  <div class="order" :style="{paddingTop: spaceBarHeight + 'px'}">
    <div class="order-nav" :style="{height: spaceBarHeight + 'px'}">
      <div class="order-title" :style="{paddingTop: menuButtonInfo['top'] + 'px', height: menuButtonInfo['height'] + 'px'}">
        <div class="search-style" @click="$pt.navigateTo({url:'/pages/order/order-search/main'})">
          <van-icon class="mar-l-5" name="search" color="#272727" size="18px" />
          <span class="font-15 mar-l-4" style="color:#272727;">搜索</span>
        </div>
        <span>订单收益</span>
      </div>
    </div>
    <div class="order-header" v-if="!isHome && getShowBuyCard">
      <div class="order-profit">
        <div class="profit-item" @click="$pt.navigateTo({url: '/pages/order/wallet/details/main'})">
          <div class="font-16 font-w mar-t-15">￥<span class="font-24">{{memberStat.totalAmount}}</span></div>
          <div class="font-15 mar-t--7">累计收入金额</div>
          <div class="profit-btn withdrawal-btn mar-t-19">收入明细</div>
        </div>
        <div class="profit-item" @click="$pt.navigateTo({url: '/pages/order/wallet/cash-manage/main'})">
          <div class="font-16 font-w mar-t-15">￥<span class="font-24">{{memberStat.availableAmount}}</span></div>
          <div class="font-15 mar-t--7">可提现佣金</div>
          <div class="profit-btn withdrawal-btn mar-t-19">佣金提现</div>
        </div>
      </div>
    </div>
    <div class="order-type">
      <scroll-view
        class="horizontal-bar flex"
        :scroll-into-view="'order-top-' + orderTypeActive"
        :scroll-x="true">
        <div
          class="order-item flex-item"
          :id="leftMenuClick ? '' : 'order-top-' + item.type"
          :class="{'order-item--active': orderTypeActive === item.type, 'order-item-s': deliverydict.length === 3}"
          v-for="(item, index) in deliverydict" :key="index" @click="orderTypeClick(item, index)">
            <div class="item-txt">
              {{item.text}}
            </div>
        </div>
      </scroll-view>
      <div class="refund-more" @click="afterSales">退款/售后</div>
    </div>
    <div class="order-status">
      <scroll-view
        class="horizontal-bar flex"
        :scroll-into-view="'status-top-' + statusIndex"
        :scroll-x="true">
        <div
          class="item-bar flex-item"
          :id="leftMenuClick ? '' : 'status-top-' + index"
          :class="{'item-bar--active': statusIndex === index}"
          v-for="(item, index) in statusList"
          :key="index"
          @click="tabClick(item, index)">
            <div class="item-txt">
              {{item.text}}
              <div :class="{'leftline': statusIndex === index}"></div>
            </div>
        </div>
      </scroll-view>
      <div class="tab-more" @click="selectLayerShow">
        <img v-if="fileSpace" class="width-15 height-14 mar-r-5" :src="fileSpace + '/images/home-category.png'" alt="">
        <span>筛选</span>
      </div>
    </div>
    <div class="order-list">
      <div class="order-list-item" v-for="(item, index) in orderList" :key="index" @click="queryOrderInfo(item)">
        <div class="order-list__header">
          <div class="v-align-c">
            <!-- <div class="ordet-type-tag">{{orderTypeDict[item.deliveryType]}}</div> -->
            <!-- 保税图标表示在此 -->
            <div class="ordet-type-tag">{{item.deliveryTypeText}}</div>
            <div class="v-align-c">
              <img class="width-24 height-24 border-r" v-if="item.customerAvatar" :src="item.customerAvatar" alt="">
              <div class="font-14 font-w mar-l-6">{{item.customerNickname}}</div>
            </div>
          </div>
          <div>{{orderStatusDict[item.orderStatus]}}</div>
        </div>
        <div class="order-list--goodswrap">
          <div class="order-list__goods" v-for="(good, gooodIndex) in item.orderGoodsList" :key="gooodIndex">
            <!-- 保税图标表示，为正方形2行文字，为item.deliveryTypeText展示 -->
            <img class="goods-img" v-if="good.goodsImageUrl" :src="good.goodsImageUrl" alt="">
            <div class="flex-item mar-l-8">
              <div class="flex flex-col flex-between min-h-c">
                <div class="width-per-100">
                  <div class="_line-1 font-14 font-w">{{good.goodsTitle}}</div>
                  <div v-if="good.skuDetail" class="font-12 font-color-9">{{good.skuDetail}}</div>
                </div>
                <div class="width-per-100">
                  <div class="flex v-align-c flex-between mar-t-23">
                    <div class="font-11" style="color:#F8303D;">￥<span class="font-16 font-w">{{good.goodsPrice}}</span></div>
                    <div class="font-12 font-color-9 pad-t-2">x{{good.goodsNum}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="order-list__total">
          <div>共{{item.goodsNum}}件</div>
          <div class="order-list__price">
            <div>合计：<span style="color:#F8303D;">￥</span><span class="font-18" style="color:#F8303D;">{{item.orderPrice}}</span></div>
            <div class="mar-t-4">
              <span>(含</span>
              <span v-if="item.taxAmount && (item.taxAmount * 1 > 0)">税费¥{{ item.taxAmount }}，</span>
              <span>运费¥{{ item.freight }}</span>
              <span>)</span>
            </div>
          </div>
        </div>
        <div class="flex v-align-c pad-10" v-if="item.deliveryType === 1 || item.deliveryType === 2">
          <div class="flex-item font-gray">
            {{ item.createTime }}
          </div>
          <div class="mar-r--10">
            <span class="order-btn mar-r-10" @click.stop="queryOrderInfo(item)">查看详情</span>
            <span v-if="item.orderStatus===1 && typeName==='实物商品' && item.deliveryType === 1 && item.orderType === 10" class="order-btn mar-r-10" @click.stop="showDeliverGoods(item)">我要发货
            </span>
            <span v-if="item.orderStatus===1 && typeName==='服务商品'" class="order-btn mar-r-10" @click.stop="showServiceGoods(item)">我要核销
            </span>
            <span v-if="(item.orderStatus===2 && typeName==='实物商品') || (item.orderStatus===3 && typeName==='实物商品')" class="order-btn mar-r-10" @click.stop="queryExpress(item)">查看物流
            </span>
          </div>
        </div>
        <div 
          v-if="item.orderStatus === 2 && (item.deliveryType === 3 || item.deliveryType === 2 || item.deliveryType === 4)"
          class="align-r btnbar pad-r-10 pad-b-10">
          <div
            v-if="item.verifyCode"
            class="btnbar-pay btn"
            @click.stop.prevent="goDeliveryDetail(item)">确认核销</div>
          <div
            v-if="item.customerPhone"
            class="btnbar-default btn"
            @click.stop.prevent="$pt.makePhoneCall({phoneNumber: item.customerPhone})">联系顾客</div>
        </div>
      </div>
    </div>
    <div class="pad-10 mar-t-10 align-c" v-if="noData">
      <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30" :src="fileSpace + '/images/2-0-kong.png'" />
      <div class="pad-t-20 font-14 font-gray">空空如也</div>
    </div>
    <div class="div-pop" catchtouchmove="true" v-if="selectLayer" @click="hideSelectLayer">
      <div class="search-bar" :style="{height: spaceBarHeight + 'px'}" @click.stop>
        <van-icon name="arrow-left" size="18px" color="#FFF" @click="hideSelectLayer" />
        <div class="search-style" @click="$pt.navigateTo({url:'/pages/order/order-search/main'})">
          <van-icon class="mar-l-15" name="search" color="#272727" size="18px" />
          <span class="font-15 mar-l-4" style="color:#272727;">搜索订单</span>
        </div>
      </div>
      <div class="select-bar" @click.stop>
        <h3>订单类型</h3>
        <div class="flex-wrap">
          <div class="flex-wrap-item"
            :class="{'flex-wrap-long': index !== 0, 'flex-wrap-item-active': orderCateActive === item.type}"
            v-for="(item, index) in orderType"
            :key="index"
            @click="orderCateClick(item, index, 'layer')"
            >{{item.text}}</div>
        </div>
        <h3>配送方式</h3>
        <div class="flex-wrap">
          <div class="flex-wrap-item"
            :class="{'flex-wrap-long': index !== 0, 'flex-wrap-item-active': searchDeliveryType === item.type}"
            v-for="(item, index) in deliverySearchdict"
            :key="index"
            @click="orderDeliveryType(item, index, 'layer')"
            >{{item.text}}</div>
        </div>
        <h3 class="mar-t-27">订单状态</h3>
        <div class="flex-wrap">
          <div class="flex-wrap-item flex-wrap-status"
            :class="{'flex-wrap-item-active': index === statusSearchIndex}"
            v-for="(item, index) in statusList"
            :key="index"
            @click="tabSearch(item, index)"
            >{{item.text}}</div>
        </div>
        <div class="select-bar-footer">
          <div class="select-btn reset-btn" @click="resetClick">重置</div>
          <div class="select-btn confirm-btn" @click="confirmSelect">确定</div>
        </div>
      </div>
    </div>
    <div class="div-pop" v-if="isDeliverGoods" catchtouchmove="true">
      <div class="border-radius-5 width-per-90" catchtap="true">
        <div class="panel pad-14">
          <div class="flex pad-t-5 pad-b-15">
            <div class="flex-item">
              <div class="font-16">收货人</div>
            </div>
            <div>
              <icon class="iconfont icon-shanchu4 font-16" @click="isDeliverGoods=false"></icon>
            </div>
          </div>

          <div class="pad-b-8 flex-row v-align-c">
            <div class="font-14 font-w order-col">联系人：</div>
            {{orderInfo.customerNickname}}
          </div>
          <div class="pad-b-8 flex-row v-align-c">
            <div class="font-14 font-w order-col">电话：</div>
            {{orderInfo.customerPhone}}
          </div>
          <div class="pad-b-8 flex-row v-align-c">
            <div class="font-14 font-w order-col">地址：</div>
            <div class="add-bar-line line-1">{{orderInfo.customerAddress}}</div>
          </div>
          <div class="pad-b-8">
            <div class="font-16">物流公司</div>
            <div class="flex v-align-c btn-border pad-10 font-14" @click="showExpressPicker">
              <div class="flex-item">
                <label>{{pickExpressText}}</label>
              </div>
              <div>
                <icon class="iconfont icon-xiala font-13"></icon>
              </div>
            </div>
          </div>
          <div class="pad-b-8">
            <div class="font-16">快递单号</div>
            <div class="btn-border pad-10 font-14">
              <input v-model="orderInfo.trackingNo" placeholder="请输入快递单号" />
            </div>
          </div>
          <div class="pad-b-8">
            <button class="btn-save" @click="deliverGoods">确认发货</button>
          </div>
        </div>
      </div>
    </div>
    <van-popup :show="isShowExpressPicker" position="bottom" @close="onExpressClose">
      <van-picker show-toolbar :columns="pickExpressArray" @cancel="onExpressClose" @confirm="onExpressConfirm" />
    </van-popup>
  </div>
</template>
<script>
import { listDeliveryType, pageProjectOrderByMemberId } from '@/api/order'
import { statMemberCommission, pageUserOrder } from '@/api/personal'
import {
  listExpress
} from '@/api/common'
import {
  doDeliverGoods
} from '@/api/shop'
import statusDict from './status.json'
export default {
  data() {
    return {
      orderQueryActive: '',
      orderCateActive: '',
      orderTypeActive: '',
      orderSearchActive: '',
      searchDeliveryType: '',
      queryDeliveryType: '',
      statusSearchIndex: 0,
      statusSearch: '',
      statusIndex: 0,
      statusList: [],
      menuButtonInfo: {}, // 胶囊按钮信息
      spaceBarHeight: 0, // 导航栏高度
      memberStat: {
        totalAmount: 0,
        availableAmount: 0
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      currentPage: 1,
      selectLayer: false,
      status: '',
      orderStatusDict: {},
      value: '',
      typeName: '',
      typeMap: {
        '实物商品': 10,
        '服务商品': 20
      },
      orderList: [], // 订单列表
      orderTypeDict: {}, // 订单配送类型键值对
      deliverydict: [], // 订单配送方式
      deliverySearchdict: [], // 右侧筛选，订单配送方式
      noData: false, // 订单列表是否有数据
      memberStore: {},
      groupBuyAuthority: 0, // 社区团购的增值功能是否开启
      isHome: false, // 判断店铺类型是否为门店
      orderInfo: {},
      isDeliverGoods: false,
      pickExpressText: '请选择物流',
      pickExpressArray: [],
      isShowExpressPicker: false,
      orderType: []

    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    // 获取胶囊按钮信息
    let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
    this.menuButtonInfo = menuButtonInfo
    // 设备信息
    let devInfo = this.$pt.getSystemInfoSync()
    // 整个导航栏高度
    this.spaceBarHeight = devInfo['statusBarHeight'] + menuButtonInfo['height'] + (menuButtonInfo['top'] - devInfo['statusBarHeight']) * 2
  },
  mounted() {
    this.typeName = '实物商品'
    this.listExpress()
  },
  onShow() {
    this.currentPage = 1
    this.pullLoad.finished = false
    this.orderList = []
    this.statMemberCommission()
    this.listDeliveryType()
    let orderType = this.$pt.getStorageSync('orderType')
    switch (orderType) {
      case 1:
        this.orderTypeActive = '4'
        this.statusIndex = 2
        this.$pt.removeStorageSync('orderType')
        break
      case 2:
        const commanderStatus = this.$pt.getStorageSync('commanderStatus')
        // 团长身份进入 tab标签直接切到"社区团购"及"待提货" 状态
        if (commanderStatus === 1) {
          this.orderTypeActive = '3'
          this.statusIndex = 3
        } else {
          this.orderTypeActive = ''
          this.statusIndex = 2
        }
        this.$pt.removeStorageSync('orderType')
        break
      case 3:
        this.orderTypeActive = '3'
        this.statusIndex = 2
        this.$pt.removeStorageSync('orderType')
        break
      case 4:
        this.orderTypeActive = ''
        this.statusIndex = 0
        this.$pt.removeStorageSync('orderType')
        break
      default:
        break
    }
    switch (this.orderTypeActive) {
      case '':
        // 全部-类型（默认自营订单-类型）
        this.statusList = statusDict.three
        break
      case '1':
        // 自营订单-类型（目前statusDict.three与statusDict.four数据相同）
        this.statusList = statusDict.three
        break
      case '2':
        // 分销订单-类型（目前statusDict.three与statusDict.four数据相同）
        this.statusList = statusDict.four
        break
      case '3':
        // 社区订单-类型
        this.statusList = statusDict.one
        break
      case '4':
        // 到家订单-类型
        this.statusList = statusDict.two
        break
      default:
        break
    }
    this.groupBuyAuthority = this.$pt.getStorageSync('appInfo').groupBuyAuthority
    this.memberStore = this.$pt.getStorageSync('memberStore')
    this.isHome = this.memberStore.isHomeDelivery === 1 || this.memberStore.isStoreExtraction === 1
    this.status = this.statusList[this.statusIndex].status
    this.orderStatusData()
    this.pageProjectOrderByMemberId()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageProjectOrderByMemberId()
    }
  },
  methods: {
    orderStatusData() {
      // console.log('111 info', this.groupBuyAuthority, this.isHome)
      if (this.groupBuyAuthority || this.isHome) {
        this.orderStatusDict = {
          '0': '待付款',
          '1': '待配送',
          '2': '待提货',
          '3': '已提货',
          '4': '已完成',
          '20': '待配送',
          '-1': '已取消',
          '-2': '已取消'
        }
      } else {
        this.orderStatusDict = {
          '0': '待付款',
          '1': '待发货',
          '2': '待收货',
          '3': '已收货',
          '4': '已完成',
          '20': '待发货',
          '-1': '已取消',
          '-2': '已取消'
        }
      }
    },
    listExpress() {
      listExpress().then((response) => {
        if (response.isError) return
        const expressList = response.data
        this.pickExpressArray = []
        expressList.forEach(express => {
          this.pickExpressArray.push({
            text: express.expressName,
            value: express.expressId
          })
        })
      }).catch(() => {
      })
    },
    onExpressClose() {
      this.isShowExpressPicker = false
      this.isDeliverGoods = true
    },
    onExpressConfirm(e) {
      this.isShowExpressPicker = false
      this.pickExpressId = e.mp.detail.value.value
      this.pickExpressText = e.mp.detail.value.text
      this.orderInfo.expressId = this.pickExpressId
      this.isDeliverGoods = true
    },
    showExpressPicker() {
      this.isShowExpressPicker = true
      this.isDeliverGoods = false
    },
    showDeliverGoods(order) {
      this.orderInfo.trackingNo = ''
      this.orderInfo = order
      this.isDeliverGoods = true
    },
    deliverGoods() {
      if (!this.orderInfo.trackingNo && !this.orderInfo.verifyCode) {
        return this.$utils.showToast({ title: '请输入发货/服务信息' })
      }
      doDeliverGoods({
        customerNickname: this.orderInfo.customerNickname,
        customerMemberId: this.getCustomerId,
        memberId: this.orderInfo.memberId,
        orderStatus: this.orderInfo.orderStatus,
        orderNo: this.orderInfo.orderNo,
        orderType: this.orderInfo.orderType,
        orderId: this.orderInfo.orderId,
        addressId: this.orderInfo.addressId,
        deliveryType: this.orderInfo.deliveryType,
        trackingNo: this.orderInfo.trackingNo,
        expressId: this.orderInfo.expressId
      }).then((response) => {
        if (response.isError) return
        if (response.code) {
          this.isDeliverGoods = false
          this.isServiceGoods = false
        }
        this.orders = []
        this.currentPage = 1
        this.pageProjectOrderByMemberId()
      }).catch(() => {
      })
    },
    goDeliveryDetail(item) {
      this.$pt.navigateTo({url: `/pages/home/store-cancellation/order-cancellation/main?orderId=${item.orderId}&orderType=${item.orderType}`})
    },
    tabSearch(item, index) {
      this.statusSearchIndex = index
      this.statusSearch = item.status
    },
    tabClick(item, index, type) {
      this.statusIndex = index
      this.status = item.status
      if (type === 'layer') return
      this.currentPage = 1
      this.pullLoad.finished = false
      this.orderList = []
      this.pageProjectOrderByMemberId()
    },
    deliveryData(item) {
      // 如果是跨境类型，则不配送方式不展示--门店自提
      if (item.text.indexOf('跨境') !== -1) {
        this.deliverySearchdict = [
          {text: '全部', type: ''},
          {text: '物流快递', type: '1'}
        ]
      } else {
        this.deliverySearchdict = [
          {text: '全部', type: ''},
          {text: '物流快递', type: '1'},
          {text: '门店自提', type: '99'}
        ]
      }
    },
    orderCateClick(item) {
      // 订单类型点击事件
      this.orderCateActive = item.type
      this.deliveryData(item)
    },
    orderDeliveryType(item) {
      // 配送类型点击事件
      this.searchDeliveryType = item.type
      switch (item.type) {
        case '':
          // 全部-类型（默认自营订单-类型）
          this.statusList = statusDict.three
          break
        case '1':
          // 自营订单-类型（目前statusDict.three与statusDict.four数据相同）
          this.statusList = statusDict.three
          break
        case '2':
          // 分销订单-类型（目前statusDict.three与statusDict.four数据相同）
          this.statusList = statusDict.four
          break
        case '3':
          // 社区订单-类型
          this.statusList = statusDict.one
          break
        case '4':
          // 到家订单-类型
          this.statusList = statusDict.two
          break
        case '99':
          this.statusList = statusDict.nine
          break
        default:
          break
      }
      this.statusIndex = 0
      this.status = this.statusList[this.statusIndex].status
    },
    orderTypeClick(item) {
      // 订单类型点击事件
      this.orderTypeActive = item.type
      // console.log('orderTypeActive 222', index, item.type)
      this.orderQueryActive = item.type
      this.queryDeliveryType = item.type
      if (item.type === '2') {
        // 跨境订单，deliveryType 配送类型为1，快递物流
        this.queryDeliveryType = '1'
      }
      switch (item.type) {
        case '':
          // 全部-类型（默认自营订单-类型）
          this.statusList = statusDict.three
          break
        case '1':
          // 自营订单-类型（目前statusDict.three与statusDict.four数据相同）
          this.statusList = statusDict.three
          break
        case '2':
          // 分销订单-类型（目前statusDict.three与statusDict.four数据相同）
          this.statusList = statusDict.four
          break
        case '3':
          // 社区订单-类型
          this.statusList = statusDict.one
          break
        case '4':
          // 到家订单-类型
          this.statusList = statusDict.two
          break
        case '99':
          this.statusList = statusDict.nine
          break
        default:
          break
      }
      this.statusIndex = 0
      this.status = this.statusList[this.statusIndex].status
      this.currentPage = 1
      this.pullLoad.finished = false
      this.orderList = []
      this.pageProjectOrderByMemberId()
    },
    resetClick() {
      // 筛选--重置
      this.orderCateActive = ''
      this.searchDeliveryType = ''
      this.statusSearchIndex = 0
      this.statusSearch = ''
    },
    confirmSelect() {
      // 筛选--确定
      this.currentPage = 1
      this.pullLoad.finished = false
      this.orderList = []
      this.queryDeliveryType = this.searchDeliveryType
      this.orderQueryActive = this.orderCateActive
      this.statusIndex = this.statusSearchIndex
      this.status = this.statusSearch
      if (this.orderQueryActive === 3) {
        this.queryDeliveryType = '99'
      }
      this.pageProjectOrderByMemberId()
      // 订单类型选择后，关闭层页面状态展示
      this.orderTypeActive = String(this.orderCateActive)
      if (this.orderCateActive && this.deliverydict[this.orderCateActive].type === '99') {
        this.orderTypeActive = this.deliverydict[this.orderCateActive].type
      }
      // 配送类型选择后，关闭层页面状态展示
      // this.searchDeliveryType
      this.selectLayer = false
      this.$pt.showTabBar({
        animation: false
      })
    },
    statMemberCommission() {
      // 佣金统计 提现统计
      statMemberCommission({
        memberId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        this.memberStat.totalAmount = this.$utils.trsCount(response.data.totalAmount)
        this.memberStat.availableAmount = this.$utils.trsCount(response.data.availableAmount)
      }).catch(() => {
      })
    },
    selectLayerShow() {
      // 弹出筛选面板
      this.$pt.hideTabBar({
        animation: false
      })
      this.selectLayer = true
      // 弹出层时，订单类型展示
      this.orderCateActive = Number(this.orderTypeActive)
      if (this.orderTypeActive === '') {
        this.orderCateActive = ''
      }
      console.log('orderTypeActive 111222', this.orderTypeActive)
      let index = this.deliverydict.findIndex(listItem => {
        return listItem.type === this.orderTypeActive
      })
      if (this.orderTypeActive === '99') {
        this.orderCateActive = index
      }
      this.deliveryData(this.deliverydict[index])
      this.statusSearchIndex = this.statusIndex
      this.statusSearch = this.status
    },
    hideSelectLayer() {
      this.$pt.showTabBar({
        animation: false
      })
      this.selectLayer = false
    },
    listDeliveryType() {
      // 根据店主类型获取订单配送方式
      listDeliveryType(this.getCustomerId).then(response => {
        if (response.isError) return
        this.deliverydict = []
        this.orderTypeDict = response.data
        let resData = response.data
        Object.keys(resData).forEach(key => {
          this.deliverydict.push({
            text: resData[key],
            type: key
          })
        })
        this.deliverydict.unshift({
          text: '全部',
          type: ''
        })
        if (!this.groupBuyAuthority || !this.memberStore.isCommunityGroupExtraction) {
          this.deliverydict = this.deliverydict.filter((item) => item.text !== '社区团购')
        }
        // this.deliverydict = [{
        //   text: '全部',
        //   type: ''
        // }, {
        //   text: '普通订单',
        //   type: '1'
        // }, {
        //   text: '自营订单',
        //   type: '99'
        // }]
        // 固定数据，以deliverydict数据为参考，只取快递和自营
        this.deliverySearchdict = [
          {text: '全部', type: ''},
          {text: '物流快递', type: '1'},
          {text: '门店自提', type: '99'}
        ]
        // console.log('this.deliverydict 222', this.deliverydict)
        this.orderType = this.$utils.deepClone(this.deliverydict)
        this.orderType.forEach(item => {
          if (item.type) {
            item.type = Number(item.type)
          }
          if (item.type === 99) {
            item.type = this.orderType.length - 1
          }
        })
        // console.log('this.orderType 222', this.orderType)
      }).catch(() => {
      })
    },
    pageProjectOrderByMemberId() {
      // 获取订单列表页分页数据
      let params = {
        keyword: this.value,
        memberId: this.getCustomerId,
        // deliveryType  1为快递   2为自营  3为社区   4、5为门店
        deliveryType: this.queryDeliveryType,
        currentPage: this.currentPage,
        size: 10
      }
      this.noData = false
      if (this.queryDeliveryType === '99') {
        params.orderStatus = this.status
        params.orderType = 10
        pageUserOrder(params).then(res => {
          if (res.isError) return
          if (res.data.total === 0) {
            this.noData = true
          }
          res.data.records.forEach(_item => {
            switch (_item.deliveryType) {
              case 1:
                _item['deliveryTypeText'] = '快递配送'
                break
              case 2:
                _item['deliveryTypeText'] = '到家自提'
                break
            }
            _item.verificationCode = true
            this.orderList.push(_item)
          })
          this.currentPage++
          if (this.orderList.length >= res.data.total || this.orderList.length === 0) {
            this.pullLoad.finished = true
          }
        })
        return
      }
      params.orderStatusList = this.status
      params.crossBorderOrderType = this.orderQueryActive
      pageProjectOrderByMemberId(params).then(response => {
        if (response.isError) return
        if (response.data.total === 0) {
          this.noData = true
        }
        response.data.records.forEach(item => {
          switch (item.deliveryType) {
            case 1:
              item['deliveryTypeText'] = '快递配送'
              if (item.crossBorderOrderType === 2) {
                item['deliveryTypeText'] = '跨境保税'
              }
              break
            case 2:
              item['deliveryTypeText'] = '到家自提'
              break
            case 3:
              item['deliveryTypeText'] = '社区团购'
              break
            case 4:
              item['deliveryTypeText'] = '门店自提'
              break
            case 5:
              item['deliveryTypeText'] = '到家配送'
              break
          }
          item.verificationCode = true
          this.orderList.push(item)
        })
        this.currentPage++
        if (this.orderList.length >= response.data.total || this.orderList.length === 0) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    afterSales() {
      // 去售后订单列表页
      this.$pt.navigateTo({ url: '/pages/order/refund-list/main?type=seller' })
    },
    queryOrderInfo(order) {
      switch (order.deliveryType) {
        case 1:
          // 快递配送
          if (order.orderType === 30) {
            this.$pt.navigateTo({ url: '/pages/order/distribution/order/detail/main?orderId=' + order.orderId })
          } else if (order.orderType === 10) {
            this.$pt.navigateTo({ url: '/pages/order/detail/main?orderId=' + order.orderId })
          }
          break
        case 2:
          // 门店自提
          this.$pt.navigateTo({ url: '/pages/order/detail/main?orderId=' + order.orderId })
          break
        case 3:
          // 社区团购
          this.$pt.navigateTo({ url: '/pages/order/delivery-detail/main?orderId=' + order.orderId })
          break
        case 4:
          // 到家自提
          this.$pt.navigateTo({ url: '/pages/order/delivery-detail/main?orderId=' + order.orderId })
          break
        case 5:
          // 到家配送
          this.$pt.navigateTo({ url: '/pages/order/delivery-detail/main?orderId=' + order.orderId })
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.min-h-c{
  min-height: 100px;
}
.order{
  background-color: #FFF;
  min-height: 100vh;
  box-sizing: border-box;
  .btnbar{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn{
      font-size: 13px;
      border-radius: 13.5px;
      margin-left: 9px;
      width: 87px;
      height: 25px;
      line-height: 25px;
      text-align: center;
    }
    &-default{
      background: white;
      color: #999999;
      border: 1px solid #B6B6B6;
    }
    &-pay{
      width: 89px !important;
      height: 27px !important;
      line-height: 27px !important;
      background: #ff243d;
      color: #fff;
    }
  }
  .order-nav{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #FF243D;
    z-index: 99;
    .order-title{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #FFF;
      font-weight: bold;
      .search-style{
        width: 80px;
        height: 32px;
        background-color: #fff;
        border-radius: 20px;
        display: flex;
        align-items: center;
        position: absolute;
        left: 10px;
        z-index: 10;
      }
    }
  }
  .order-header{
    background: linear-gradient(to bottom, #FF243D, #FF3C52);
    height: 152px;
    padding: 9px 12px 0;
    box-sizing: border-box;
    .order-profit{
      background: linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
      color: #FFF;
      height: 143px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      .profit-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        .profit-btn{
          width: 92px;
          height: 38px;
          line-height: 38px;
          text-align: center;
          border-radius: 19px;
          background-color: #FF6476;
          font-size: 14px;
          box-shadow: 0 0 9px rgba(213, 20, 42, 0.33);
        }
        .withdrawal-btn{
          background-color: #FFF;
          color: #FF243D;
        }
      }
    }
  }
  .order-type{
    display: flex;
    background-color: #F6F6F6;
    .horizontal-bar {
      height: 56px;
      white-space: nowrap;
      overflow-x: scroll;
      padding-left: 12px;
      flex: 1;
      &:after{
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      .order-item {
        display: inline-block;
        height: 56px;
        line-height: 56px;
        margin: 0 0px;
        padding: 0 10px;
        font-size: 15px;
        text-align: center;
        overflow: hidden;
        &:first-child{
          margin: 0 5px 0 0;
        }
        &.order-item-s{
          margin: 0 10px;
          &:first-child{
            margin: 0 10px 0 0;
          }
        }
        .item-txt{
          display: inline-block;
          position: relative;
        }
        &--active {          
          font-weight: bold;
          font-size: 20px;
          position: relative;
          &::after{
            content: '';
            position: absolute;
            left: 50%;
            bottom: 6px;
            width: 30px;
            height: 5px;
            transform: translateX(-50%);
            background-color: #FF243D;
            border-radius: 3px;
          }
        }
      }
    }
    .refund-more{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px 0 20px;
      position: relative;
      &::after{
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        height: 36px;
        width: 1px;
        background-color: #999;
      }
    }
  }
  .order-status{
    display: flex;
    border-bottom: 1px solid #F5F5F5;
    .horizontal-bar {
      height: 48px;
      white-space: nowrap;
      overflow-x: scroll;
      padding-left: 12px;
      flex: 1;
      &:after{
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      .item-bar {
        display: inline-block;
        height: 48px;
        line-height: 48px;
        margin: 0 10px;
        padding: 0 10px;
        font-size: 16px;
        color: #999;
        font-size: 15px;
        text-align: center;
        overflow: hidden;
        &:first-child{
          margin: 0 10px 0 0;
        }
        .item-txt{
          display: inline-block;
          position: relative;
        }
        &--active {          
          font-weight: bold;
          color: #333;
        }
      }
    }
    .tab-more{
      width: 70px;
      background-color: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 1.5px 0 5px rgba(182, 182, 182, 0.33);
    }
  }
  .order-list{
    padding: 0 12px 12px;
    &-item{
      box-shadow: 0 0 9px rgba(182, 182, 182, 0.33);
      border-radius: 10px;
      background-color: #FFF;
      margin-top: 15px;
    }
    &__header{
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
    }
    &--goodswrap{
      padding: 0 10px 15px;
      border-bottom: 1px solid #F5F5F5;
    }
    &__goods{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 15px;
      &:first-child{
        margin-top: 10px;
      }
      .goods-img{
        width: 100px;
        height: 100px;
        border-radius: 10px;
      }
      ._line-1{
        height: 22px;
        line-height: 22px;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        word-break:break-word;
      }
      .line-2{
        font-size: 14px;
        font-weight: bold;
        line-height: 1.3;
      }
    }
    &__total{
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      height: 55px;
    }
    &__price{
      text-align: right;
      line-height: 1;
    }
    .ordet-type-tag{
      position: relative;
      width: 37px;
      height: 37px;
      margin-top: -10px;
      background-color: red;
      color: #FFF;
      line-height: 1.3;
      font-size: 12px;
      font-weight: bold;
      letter-spacing: 2px;
      display: flex;
      align-items: center;
      text-align: center;
      padding-left: 2px;
      box-sizing: border-box;
      border-radius: 0 0 5px 5px;
      // writing-mode: vertical-rl;
      &::before{
        content: '';
        position: absolute;
        left: -3px;
        top: 0px;
        width: 0;
        height: 0;
        border-bottom: 4px solid #DB041D;
        border-left: 3px solid transparent;
      }
      &::after{
        content: '';
        position: absolute;
        right: -3px;
        top: 0px;
        width: 0;
        height: 0;
        border-bottom: 4px solid #DB041D;
        border-right: 3px solid transparent;
      }
    }
  }
  .btn-save {
  background-color: #f8c400;
}

.btn-border {
  border: 1px solid #969896;
  border-radius: 5px;
  height: 20px;
  background-color: #ffffff;
}
.order-btn {
  background-color: #fff;
  color: #999999;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 50px;
  border: #cccccc 1px solid !important;
}
  .div-pop{
    display: block;
    .panel {
      width: 260px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      margin: 0;
    }
    .search-bar{
      background-color: #FF243D;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 64px;
      padding-top: 20px;
      padding-left: 10px;
      box-sizing: border-box;
      .search-style{
        width: 215px;
        height: 32px;
        background-color: #fff;
        border-radius: 20px;
        margin-left: 15px;
        display: flex;
        align-items: center;
      }
    }
    .select-bar{
      width: 300px;
      height: 100%;
      background-color: #FFF;
      margin-left: 75px;
      float: right;
      overflow: hidden;
      padding: 0 0px 0 15px;
      box-sizing: border-box;
    }
    h3{
      font-size: 15px;
      margin-top: 27px;
      font-weight: bold;
      &:first-of-type{
        margin-top: 10px;
      }
    }
    .flex-wrap{
      display: flex;
      flex-flow: wrap;
      align-items: center;
      justify-content: flex-start;
      &-item{
        background-color: #F5F5F5;
        border: 1px solid #F5F5F5;
        height: 32px;
        line-height: 32px;
        width: 76px;
        text-align: center;
        margin-right: 15px;
        flex-shrink: 0;
        font-size: 12px;
        border-radius: 16px;
        margin-top: 10px;
        box-sizing: border-box;
      }
      &-item-active{
        border: 1px solid #FF586B;
        background-color: #FFF3F4;
      }
      &-long{
        padding: 0 15px;
        width: unset;
      }
      &-status{
        &:nth-of-type(3n){
          margin-right: 0;
        }
      }
    }
    .select-bar-footer{
      position: fixed;
      bottom: 0;
      right: 0;
      width: 300px;
      padding: 10px 15px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .select-btn{
        font-size: 16px;
        text-align: center;
        height: 44px;
        line-height: 44px;
        border-radius: 22px;
      }
      .reset-btn{
        background-color: #F5F5F5;
        width: 108px;
        color: #666;
      }
      .confirm-btn{
        background-color: #FF243D;
        width: 153px;
        color: #FFF;
      }
    }
  }
  .border-r{
    border-radius: 50%;
    margin-left: 8px;
  }
}
</style>
